<template>
  <el-dialog
      v-model="dialogVisible"
      title="修改密码"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="修改密码:">
        <el-input v-model="form.password"/>
      </el-form-item>
      <el-form-item label="确认密码:">
        <el-input v-model="form.passwords"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="update()">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "updatePassword",
  props: {
    getDialog: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    getDialog: {
      handler(val) {
        this.dialogVisible = val
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        password: "",
        passwords: ""
      }
    }
  },
  methods: {
    close() {
      this.dialogVisible = false
    },
    update() {
      if (this.form.password == this.form.passwords) {
        let user = JSON.parse(localStorage.getItem("user"))
        let data = {
          password: this.form.password,
          id: user.id
        }
        axios({
          url: `http://localhost:8888/user/updatePassword`,
          method: "put",
          data: data
        }).then((res) => {
          if (res.data) {
            ElMessage({
              message: "修改密码成功!请重新登录!",
              type: "success"
            })
            this.dialogVisible = false
            this.$router.push("/login")
          } else {
            ElMessage({
              message: "修改密码失败",
              type: "warning"
            })
          }
        })
      }
    },
    handleClose() {
      this.$emit("close", false)
    }
  }
}
</script>

<style scoped>

</style>